<template>
  <!-- <h2>{{ msg.value }}</h2>
  <h2>{{ msg.age }}</h2>
  <h2>{{ msg.status }}</h2> -->

  <!-- <button @click="changeValue">点击修改msg</button> -->

  <h2>{{ count.count }}</h2>

  <button @click="addCount">点击加一</button>
</template>

<script>
//1.导入reactive 函数
import { reactive } from 'vue'

export default {
  setup () {
    // const msg = {
    //   value: 'hello ikun',
    //   age: 2.5
    // }

    //2.在setup中使用reactive
    const msg = reactive({
      value: 'hello ikun',
      age: 2.5,
      status: 'fail'
    })

    const changeValue = () => {
      msg.value = 'hi nage'

      msg.status = 'success'
    }

    let count = reactive({ count: 1 })

    const addCount = () => {
      count.count++
      console.log(count)
    }

    //3.导出这个数据
    return { msg, changeValue, count, addCount }
  }
}
</script>

<style lang="less"></style>
